<template>
    <div id="member">
        <div class="nav_header">
            <div class="shop_list">
                <span>全部会员数量</span><span class="text_1">1253</span><span>个,</span><span>禁言会员数量</span><span
                    class="text_2">3529423</span><span>个</span>
            </div>
            <div class="mem_tag">

                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部会员" name="first">
                        <div class="men_id">
                            <div class="bgc_3a">

                            </div>
                            <div>
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>会员id号</span>
                                            <el-input v-model="ipt_id" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>真实姓名</span>
                                            <el-input v-model="ipt_name" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>手机号</span>
                                            <el-input v-model="ipt_pne" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>会员卡号</span>
                                            <el-input v-model="ipt_mebcard" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-button class="but_cx" type="primary">查询</el-button>
                                </el-row>
                            </div>
                            <div class="member_footer">
                                <el-table :data="tableData" border style="width: 100%">
                                    <el-table-column prop="date" label="会员ID号" width="180">
                                    </el-table-column>
                                    <el-table-column prop="name" label="昵称" width="180">
                                    </el-table-column>
                                    <el-table-column prop="address" label="真实姓名">
                                    </el-table-column>
                                    <el-table-column prop="shoplist" label="手机号">
                                    </el-table-column>
                                    <el-table-column prop="time" label="会员卡号">
                                    </el-table-column>
                                    <el-table-column  prop="putaway" label="等级">
                                    </el-table-column>
                                    <el-table-column prop="whether" label="积分">
                                    </el-table-column>
                                    <el-table-column prop="timer" label="注册时间">
                                    </el-table-column>
                                    <el-table-column prop="address" label="操作">

                                        <template slot-scope="scope">
                                            <el-link type="danger">禁言</el-link>
                                            
                                            <el-button type="text" size="small" @click="goon">详情</el-button>

                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="block">
                                <el-pagination 
                                :page-size="100" background
                                    layout="total, prev, pager, next" :total="10000">
                                </el-pagination>
                            </div>
                        </div>



                    </el-tab-pane>
                    <el-tab-pane label="禁言会员" name="second">
                        <div class="men_jy">
                            <div class="men_fe">

                            </div>
                            <div>
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>会员id号</span>
                                            <el-input v-model="ipt_id" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>真实姓名</span>
                                            <el-input v-model="ipt_name" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>手机号</span>
                                            <el-input v-model="ipt_pne" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"><span>会员卡号</span>
                                            <el-input v-model="ipt_mebcard" style="width: 60px;"></el-input>
                                        </div>
                                    </el-col>
                                    <el-button class="but_cx" type="primary">查询</el-button>
                                </el-row>
                            </div>
                            <div class="member_footer">
                                <el-table :data="tableData" border style="width: 100%">
                                    <el-table-column prop="date" label="会员ID号" width="180">
                                    </el-table-column>
                                    <el-table-column prop="name" label="昵称" width="180">
                                    </el-table-column>
                                    <el-table-column prop="address" label="真实姓名">
                                    </el-table-column>
                                    <el-table-column prop="shoplist" label="手机号">
                                    </el-table-column>
                                    <el-table-column prop="time" label="会员卡号">
                                    </el-table-column>
                                    <el-table-column prop="putaway" label="等级">
                                    </el-table-column>
                                    <el-table-column prop="whether" label="积分">
                                    </el-table-column>
                                    <el-table-column prop="timer" label="注册时间">
                                    </el-table-column>
                                    <el-table-column prop="address" label="操作">
                                        <template slot-scope="scope">
                                         <el-link type="success">允许发言</el-link>
                                         
                                            <el-button type="text" size="small" @click="goon">详情</el-button>

                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="block">
                                <el-pagination  
                                     :page-size="100" background
                                    layout="total, prev, pager, next" :total="10000">
                                </el-pagination>
                            </div>
                        </div>

                    </el-tab-pane>


                </el-tabs>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: 'first',
                input9: "",
                ipt_pne: "",
                ipt_id: "",
                ipt_name: "",
                ipt_mebcard: "",
                tableData: [{
                    date: '2365 9874 1236 5263',
                    name: '澜川若宁',
                    address: '张嘉佳',
                    shoplist: "236",
                    time: "18569321465",
                    putaway: "CX23595234",
                    whether: "V03",
                    timer: "2021-08-26 12:30:56"
                }, {
                    date: '2365 9874 1236 5263',
                    name: '澜川若宁',
                    address: '张嘉佳',
                    shoplist: "236",
                    time: "18569321465",
                    putaway: "CX23595234",
                    whether: "V03",
                    timer: "2021-08-26 12:30:56"
                }, {
                    date: '2365 9874 1236 5263',
                    name: '澜川若宁',
                    address: '张嘉佳',
                    shoplist: "236",
                    time: "18569321465",
                    putaway: "CX23595234",
                    whether: "V03",
                    timer: "2021-08-26 12:30:56"
                }, {
                    date: '2365 9874 1236 5263',
                    name: '澜川若宁',
                    address: '张嘉佳',
                    shoplist: "236",
                    time: "185693214653",
                    putaway: "CX23595234",
                    whether: "V03",
                    timer: "2021-08-26 12:30:56"
                },
                {
                    date: '2365 9874 1236 5263',
                    name: '澜川若宁',
                    address: '张嘉佳',
                    shoplist: "236",
                    time: "18569321465",
                    putaway: "CX23595234",
                    whether: "V03",
                    timer: "2021-08-26 12:30:56"
                }, {
                    date: '2365 9874 1236 5263',
                    name: '澜川若宁',
                    address: '张嘉佳',
                    shoplist: "236",
                    time: "18569321465",
                    putaway: "CX23595234",
                    whether: "V03",
                    timer: "2021-08-26 12:30:56"
                }, {
                    date: '2365 9874 1236 5263',
                    name: '澜川若宁',
                    address: '张嘉佳',
                    shoplist: "236",
                    time: "18569321465",
                    putaway: "CX23595234",
                    whether: "V03",
                    timer: "2021-08-26 12:30:56"
                },

                ],
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            goon() {
                this.$router.push("/merpar")
            }
        }
    };
</script>



<style scoped>
    .men_fe {
        width: 100%;
        height: 25px;
        background-color: #F3F5FA;
    
        
    }

    .member_footer {
        width: 100%;
        /* background-color: red; */
        position: relative;
        top: 15px;
        border-radius: 10px;
        height: 100%;
        
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        margin-top: 30px;
    }

    .but_cx {
        position: absolute;
        right: 15px;
        top: 30px;
    }

    div /deep/ .el-input__inner {
        width: 208px;
    }

    .el-input__inner {
        width: 213px;
    }

    .element.style {
        padding-left: 10px;
        margin-top: 27px;
        padding-right: 10px;
    }

    element.style {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 27px;
    }

    element.style {
        padding-left: 10px;
        margin-top: 27px;
        padding-right: 10px;
    }

    element.style {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 27px;
    }

    .el-col-6 {
        width: 18%;
    }

    .grid-content bg-purple {
        width: 100px;
    }

    .el-row {
        margin-bottom: 20px;
        width: 95%;
       

    }

    .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .el-table--border th.el-table__cell, .el-table__fixed-right-patch {
    border-bottom: 1px solid #EBEEF5;
    background-color: #F2F6FC;
}

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .s_hy {
        vertical-align: -5px;
    }

    .ipt_hy {
        display: inline-block;
        position: absolute;
        width: 100px !important;
    }

    .el-input__inner {
        width: 207px;
    }

    .bgc_3a {
        width: 100%;
        height: 25px;
        background-color: #F3F5FA;
    }

    .reg {
        background-color: #fff;
    }

    .btn_reg {
        width: 250px;
        position: absolute;
        bottom: 25px;
        right: 200px;
        background-color: #2A78FF;
    }

    .reg>ul>li {
        margin-top: 45px;
        margin-left: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        list-style-type: circle;
    }

    .el-menu-item is-active {
        background-color: red;
    }

    .el-input__inner {
        width: 400px;
    }

    #pane-first {
        height: 740px;
    }

    .privatekey {
        position: relative;
        height: 900px;
    }

    .zf {
        /* background-color: #fff; */
        margin-top: 30px;
        height: 740px;
    }

    .jiekou {
        margin-left: 50px;
    }

    .el-tabs__item {
        font-size: 16px;
        font-weight: 700;
    }

    .el-tabs__item {
        padding: 0 48px;
    }

    #tab-first {
        padding-left: 20px;
    }

    .reg {
        width: 600px;
        height: 350px;
        border: 1px solid #000;
        position: relative;
        top: 150px;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }

    .block {
        position: absolute;
        bottom: 30px;
        left: 530px;
    }

    .snow_footer {
        width: 100%;
        background-color: #fff;
        position: relative;
        top: 50px;
        border-radius: 10px;
        height: 650px;
    }

    .query_2 {
        position: absolute;
        left: 300px;
        top: 90px;
    }

    .snow_btn {
        position: absolute;
        right: -1300px;
        top: 0px;
    }

    .nav_hedr {
        width: 100%;
        height: 145px;
        background-color: #fff;
        position: relative;
        top: 20px;
        border-radius: 10px;
    }

    .snow_list {
        width: 98%;
        height: 40px;
        background-color: #EBF4FF;
        position: absolute;
        left: 25px;
        top: 10px;
        border-radius: 5px;
    }
    .shop_list {
    width: 98%;
    height: 40px;
    background-color: #EBF4FF;
    position: absolute;
    left: 1%;
    top: 10px;
    border-radius: 5px;
    line-height: 40px;
}
    .snow_list {
        line-height: 40px;
    }

    .text_1 {
        color: #3D85FF;
        font-size: 20px;
    }

    .text_2 {
        color: #3D85FF;
        font-size: 20px;
    }

    .snow_name {
        display: inline-block;
        width: 200px;
        height: 25px;
    }

    .query {
        position: absolute;
        left: 25px;
        top: 90px;
    }

    .el-input__inner {
        height: 35px;
        margin-left: 5px;
    }

    .zf {
        /* background-color: #fff; */
        margin-top: 30px;
        height: 740px;
    }

    .jiekou {
        margin-left: 50px;
    }

    .el-tabs__item {
        font-size: 16px;
        font-weight: 700;
    }

    .el-tabs__item {
        padding: 0 48px;
    }

    #tab-first {
        padding-left: 20px;
    }

    .el-tabs el-tabs--top {
        position: absolute;
        top: -25px;
        background-color: red;
    }

    .el-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 0;
        height: 100%;
    }

    element.style {
        position: absolute;
        top: 15px;
        margin-left: -27px;
        width: 1648px;
    }

    .men_jy {
        width: 100%;
        height: 700px;
        background-color: #fff;
    }

    .men_id {
        width: 100%;
        height: 700px;
        background-color: #fff;
        position: absolute;
        z-index: 100;
    }

    .nav_header {

        width: 100%;
        height: 145px;
        background-color: #fff;
        position: relative;
        top: 20px;
        border-radius: 10px;


    }

    .mem_tag {
        position: absolute;
        top: 90px;
        width: 100%;

    }
    #member{
        width: 100%;
        height: 100%;
        /* background-color: red; */
    }
    .shoplist{
        width: 100%;

    }
</style>